// index.js
// 获取应用实例
const app = getApp()

Page({
	data: {
		message: '喵了个喵',
		cardSize: 48,                   //开片大小
		bjwidth: 0,                      //top背景宽度
		selectCardBjWidth: 0,            //选择卡片底座的宽度
		M: 7,                           //卡片的维度，第一层M，第二层为M-1
		cardNum: 100,                    //开片总个数
		positionList: [],               //  定位list
		allCardList: [],                // 所有待选择的卡片list
		selectedCardList: [],           // 已选择list

		cardIconList: [                 //图标队列
			{ iconIndex: 0, img: '/images/1.png' },
			{ iconIndex: 1, img: '/images/2.png' },
			{ iconIndex: 2, img: '/images/3.png' },
			{ iconIndex: 3, img: '/images/4.png' },
			{ iconIndex: 4, img: '/images/5.png' },
			{ iconIndex: 5, img: '/images/6.png' },
			{ iconIndex: 6, img: '/images/7.png' },
			{ iconIndex: 7, img: '/images/8.png' },
			{ iconIndex: 8, img: '/images/9.png' },
			{ iconIndex: 9, img: '/images/10.png' },
			{ iconIndex: 10, img: '/images/11.png' },
			{ iconIndex: 11, img: '/images/12.png' },
			{ iconIndex: 12, img: '/images/13.png' },
			{ iconIndex: 13, img: '/images/14.png' },
			{ iconIndex: 14, img: '/images/15.png' },
			{ iconIndex: 15, img: '/images/16.png' },
			{ iconIndex: 16, img: '/images/17.png' },
			{ iconIndex: 17, img: '/images/18.png' },
			{ iconIndex: 18, img: '/images/19.png' },
			{ iconIndex: 19, img: '/image/20.png' }
		],
		selectHistory: [],              // 记录已选择的卡片list，撤回
		isHover: false,
		baseStyles: {
			filter: 'grayscale(90%)'
		},
	},
	onShow() {
		// 定义底色宽度
		let bjwidth = (this.data.cardSize + 2) * this.data.M;
		let selectCardBjWidth = (this.data.cardSize + 2.5
		) * 7;
		this.setData({ bjwidth, selectCardBjWidth })
		this.initData()
	},
	//初始化函数
	initData() {
		this.setData({
			positionList: [],
			allCardList: [],
			selectedCardList: [],
			currentSelectedCard: {}
		})
		let positionList = []
		let index = 0

		// 第一层卡片
		let left = 0
		let top = 0
		for (let i = 0; i < this.data.M; i++) {
			for (let j = 0; j < this.data.M; j++) {
				//将对象放入位置
				positionList.push({ id: index++, iconIndex: 1, img: 'images/1.png', leve: false, left: left + 'px', top: top + 'px' })
				left += 50
			}
			left = 0
			top += 50
		}
		// 第二层
		left = 25
		top = 25
		for (let i = 0; i < this.data.M - 1; i++) {
			for (let j = 0; j < this.data.M - 1; j++) {
				//将对象放入位置
				positionList.push({ id: index++, iconIndex: 1, img: 'images/1.png', leve: true, left: left + 'px', top: top + 'px' })
				left += 50
			}
			left = 25
			top += 50
		}
		// for(var i=0;i<this.positionList.length;i++){
		//     console.log("==>"+this.positionList[i].leve)
		// }
		// 生成随机图标
		this.setData({ positionList })
		this.createIcon()

	},
	// 生成随机图标
	createIcon() {
		let index = 0
		// this.setData({ allCardList: [] })
		let random = 0
		let allCardList = []
		for (let i = 0; i < this.data.cardNum; i++) {
			if (i % 3 == 0) {
				random = Math.floor(Math.random() * 11)
			}
			allCardList.push({
				id: index++,
				img: this.data.cardIconList[random].img,
				iconIndex: this.data.cardIconList[random].iconIndex,

			})
		}
		allCardList.sort(() => {
			return Math.random() > 0.5 ? 1 : -1
		})
		allCardList.forEach((item, index) => {
			item.id = index
		})
		let M = this.data.M
		//矩阵总共大小
		M = M * M + (M - 1) * (M - 1)
		// 随机位置
		let pos = 0
		let positionList = this.data.positionList
		allCardList.forEach(item => {
			pos = Math.floor(Math.random() * M)
			item.left = positionList[pos].left
			item.top = positionList[pos].top
			item.leve = positionList[pos].leve
		})
		this.setData({ M, allCardList })
		console.log(allCardList);
	},
	selectedCard(e) {
		let item = e.currentTarget.dataset.item
		let index = e.currentTarget.dataset.index
		//this.isHover = this.hasOverLayer(event.srcElement)
		// let isHover = this.hasOverLayer(e)
		// console.log("selectedCard(" + isHover + ")");
		let currentSelectedCard = this.data.currentSelectedCard
		let allCardList = this.data.allCardList
		let selectedCardList = this.data.selectedCardList
		let selectHistory = this.data.selectHistory
		currentSelectedCard = item
		allCardList.splice(index, 1)
		selectedCardList.push(item)
		selectHistory.push(item)
		selectedCardList.sort((a, b) => {
			return a.iconIndex - b.iconIndex
		})
		this.setData({
			currentSelectedCard,
			allCardList,
			selectedCardList,
			selectHistory,
		})
		setTimeout(() => {
			this.checkRemove()
			if (this.data.allCardList.length == 0) {
				alert('你赢了！')
			}
			if (this.data.selectedCardList.length >= 7) {
				wx.showModal({
					title: '提示',
					content: '你输了',
					success (res) {
					  if (res.confirm) {
						console.log('用户点击确定')
					  } else if (res.cancel) {
						console.log('用户点击取消')
					  }
					}
				  })
				this.initData()
			}
		}, 500)
		// if (!isHover) {

		// }

	},
	// 判断是否可以消除
	checkRemove() {
		let num = 0
		this.data.selectedCardList.forEach(item => {
			if (this.data.currentSelectedCard.img == item.img) {
				num++
			}
		})
		if (num == 3) {
			let selectedCardList = this.data.selectedCardList
			selectedCardList = selectedCardList.filter(item => {
				return item.img != this.data.currentSelectedCard.img
			})

			//放入撤回list
			let selectHistory = this.data.selectHistory;
			selectHistory = selectHistory.filter(item => {
				return item.img != this.data.currentSelectedCard.img
			})
			this.setData({ selectHistory, selectedCardList })
		}
	},
	// 监测元素是否被覆盖
	hasOverLayer(element) {
		// let document = element.ownerDocument,                       //获取HTMLImageElement对象
		// 	rect = element.getBoundingClientRect(),
		// 	x = rect.x,
		// 	y = rect.y,
		// 	width = rect.width,
		// 	height = rect.height;
		// x |= 0;                                                     //按位或赋值
		// y |= 0;
		// width |= 0;
		// height |= 0;
		// // 四顶点取样
		// let elements = [
		// 	document.elementFromPoint(x + 1, y + 1),
		// 	document.elementFromPoint(x + width - 1, y + 1),
		// 	document.elementFromPoint(x + 1, y + height - 1),
		// 	document.elementFromPoint(x + width - 1, y + height - 1)
		// ];
		// // 判断非本身及非子孙元素
		// return elements.filter((el) => el !== null).some((el) => el !== element && !element.contains(el));
	}
})
